<template>
  <Row>
    <Col span="12" style="padding-right:10px">
      <Select v-model="model17"  filterable allow-create @on-create="handleCreate1">
        <Option v-for="item in cityList3" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </Col>
    <Col span="12">
      <Select v-model="model18" filterable multiple allow-create @on-create="handleCreate2">
        <Option v-for="item in cityList4" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </Col>
  </Row>
</template>

<script>
export default {
  data() {
    return {
      cityList3: [
        {
          value: "New York",
          label: "New York"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ],
      cityList4: [
        {
          value: "Paris",
          label: "Paris"
        },
        {
          value: "Canberra",
          label: "Canberra"
        }
      ],
      model17: "",
      model18: []
    };
  },
  methods: {
    handleCreate1(val) {
      this.cityList3.push({
        value: val,
        label: val
      });
      console.log(val);
    },
    handleCreate2(val) {
      this.cityList4.push({
        value: val,
        label: val
      });
      console.log(val)
    },
    getele(item){
      console.log(item)
    }
  }
};
</script>
